<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!-- 访问的基本路径,此页面的所有的跳转都是基于此地址作为基本地址 -->
<base href="<%=basePath%>">


<meta charset="utf-8" />
<title></title>
<!--主题样式-->
<link rel="stylesheet" type="text/css"href="resources/easyui/themes/default/easyui.css">
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
<!--jquery文件-->
<script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
<!--easyui的核心js-->
<script type="text/javascript"src="resources/easyui/jquery.easyui.min.js"></script>
<!-- 引入中文文件 -->
<script type="text/javascript"src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
	/* 配置datagrid属性 */
	$("#myDataGrid").datagrid({
		fit:true,
		//title:'模块列表',
		fitColumns:true, //让对应的列按照比例设置宽度 ,如果不设置此属性,表头设置width就是固定宽度
		url:'power/powerList.do',//数据 json串
		method:'get',
		pagination:true, //显示分页条
		//pageList:[1,3,4],
		//pageSize:1, 
		toolbar:"#toolbar", //顶部工具条
		striped:true, //斑马线效果
		singleSelect:true,//值能够选中一行,默认可以选中多行
	});
});
	//新增打开对话框
	function openDialog(){
		//打开对话框
		$("#myDialog").dialog("open");	
		//设置标题
		$("#myDialog").dialog("setTitle","新增权限");
		//清除表单数据
		$("#powerForm").form("clear");
	}
	//编辑模块
	function editPower(){
		//1.获取选中行的数据 (json对象)
		var rowData = $("#myDataGrid").datagrid("getSelected");
		if(rowData == null){
			$.messager.alert("温馨提示","请选择需要修改的行",'warning'); 
			return;
		}
		
		//会显表单数据: 调用表单的load方法
		$("#powerForm").form("load",rowData);
		
		//打开对话框
		$("#myDialog").dialog("open");	
		//设置标题
		$("#myDialog").dialog("setTitle","编辑权限");
	}
	//保存或者更新
	function saveOrUpdatePower(){
		//获取权限的id,如果id有值,修改操作,如果没有值,保存操作
		var power_id = $("#power_id").val();
		
		var url = null;
		if(power_id !=""){//修改操作
			url = "power/updatePower.do";
		}else{//保存操作
			url = "power/addPower.do";
		}
		console.log(url);
		
		$('#powerForm').form('submit', {    
		    url:url,    
		    success:function(data){
		    	data = eval('(' + data + ')');  
		      	
		    	if(data.code == 1){
		    		$.messager.alert("温馨提示",data.msg,'info');  
		    		//关闭对话框
		    		$("#myDialog").dialog("close");	
		    		//重新加载datagrid
		    		$("#myDataGrid").datagrid("reload");
		    		
		    	}else{
		    		$.messager.alert("温馨提示",data.msg,'error'); 
		    	}
		    }    
		});  
	}
	//取消操作:关闭对话框
	function closeDialog(){
		//关闭对话框
		$("#myDialog").dialog("close");	
	}
	
	//删除操作
	function del(){
		//1.获取选中行的数据 (json对象)
		var rowData = $("#myDataGrid").datagrid("getSelected");
		if(rowData == null){
			$.messager.alert("温馨提示","请选择需要删除的行",'warning'); 
			return;
		}
		//提示用户是否删除
		$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
		    if (r){    
		    	//2.获取选中行中数据的id
				var power_id = rowData.power_id;
				//3向后台发送ajax请求删除数据
				$.get("power/deletePowerById.do",{"power_id":power_id},function(data){
					if(data.code == 1){
			    		$.messager.alert("温馨提示",data.msg,'info');  
			    		//重新加载datagrid
			    		$("#myDataGrid").datagrid("reload");
			    		
			    	}else{
			    		$.messager.alert("温馨提示",data.msg,'error'); 
			    	}
				});
		    }    
		});  
	}
	
	
	function formatterPowerDisplay(value,row,index){
		if(value == 0){
			return "<span style='color:green'>显示</span>"
		}else{
			return "不显示"
		}
	}
	
</script>


<!-- 表单对话框 dialog -->
<div id="myDialog" class="easyui-dialog" 
	data-options="{width:300,height:250,buttons:'#dialogButtons',closed:true}"
>
	<form id="powerForm" method="post">
		<!-- 模块id,用于修改的时候用 -->
		<input type="hidden" id="power_id" name="power_id">
		<table align="center" style="margin-top: 10px">
			<tr>
				<td>权限名称</td>
				<td><input name="power_name" class="easyui-validatebox" data-options="{required:true}"></td>
			</tr>
			<tr>
				<td>权限路径</td>
				<td><input name="power_action" class="easyui-validatebox" data-options="{required:true}"></td>
			</tr>
			<tr>
				<td>是否显示</td>
				<td>
					是<input type="radio" name="power_display" value="0" checked="checked">
					否<input type="radio" name="power_display" value="1">
				</td>
			</tr>
			<tr>
				<td>所属模块</td>
				<td>
					<select class="easyui-combobox" data-options="{required:true}" name="modular_id">
						<option value="2">系统管理模块</option>
						<option value="3">其他模块</option>
					</select>
					
				</td>
			</tr>
		</table>
	</form>	
</div>

<!-- 对话框底部的工具条 -->
<div id="dialogButtons">
	<a onclick="saveOrUpdatePower();" class="easyui-linkbutton" data-options="{iconCls:'icon-save',plain:true}">保存</a>
	<a onclick="closeDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
</div>



<!-- datagrid的顶部工具条 -->
<div id="toolbar">
	<a onclick="openDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-add',plain:true}"></a>
	<a onclick="editPower();"class="easyui-linkbutton" data-options="{iconCls:'icon-edit',plain:true}"></a>
	<a onclick="del();" class="easyui-linkbutton" data-options="{iconCls:'icon-remove',plain:true}"></a>
</div>

<!-- datagrid 组件 -->
<table  id="myDataGrid" class="easyui-datagrid" >
	<thead>
			<tr>
				<th data-options="field:'power_id',width:1">序号</th>
				<th data-options="field:'power_name',width:1">权限名称</th>
				<th data-options="field:'power_action',width:1">权限路径</th>
				<th data-options="field:'power_display',width:1,formatter:formatterPowerDisplay">是否显示</th>
				<th data-options="field:'modular_name',width:1">所属模块</th>
			</tr>
		</thead>
</table >